<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米汽车官网</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-image: url(../img/qq.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .header {
            position: relative;
            display: flex;
            width: 100%;
            height: 60px;
            transition: .8s all linear;
        }

        .header:hover {
            background-color: black;
            opacity: .8;
        }

        .first {
            display: flex;
            margin-top: 10px;
            margin-left: 20px;
        }

        .first p {
            margin-top: 13px;
            margin-left: 1px;
            color: rgb(252, 253, 253);
            font-family: '微软雅黑', serif;
            letter-spacing: 1px;
            font-weight: 500;
        }

        .second {
            margin-left: 250px;
        }

        .underline a{
            display: inline-block;
        }

        .underline::after {
            content: "";
            position: relative;
            width: 0;
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: black;
            animation: slideIn 2s forwards, blink 1s infinite;
        }

        @keyframes slideIn {
            0% {
                width: 0;
            }

            100% {
                width: 100%;
            }
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        .btli {
            float: left;
            text-align: center;
            width: 120px;
            line-height: 60px;
            white-space: nowrap;
            list-style-type: none;
            left: 400px;
        }

        .btli a {
            text-decoration: none;
            color: rgb(252, 253, 253);
        }

        .nav {
            position: absolute;
            top: 100%;
            width: 100%;
            height: 70px;
            left: 0;
            background-color: #333;
            display: none;
        }

        .btli-1 {
            display: flex;
            padding-left: 540px;
        }

        .nav li a {
            padding: 10px 35px;
            color: #fff;
        }

        .second li:hover .nav {
            display: block;
        }

        .nav-1 {
            position: absolute;
            top: 100%;
            width: 100%;
            height: 70px;
            left: 0;
            background-color: #333;
            display: none;
        }

        .btli-2 {
            display: flex;
            padding-left: 450px;
        }

        .nav-1 li a {
            padding: 10px 35px;
            color: #fff;
        }

        .second li:hover .nav-1 {
            display: block;
        }

        .nav-2 {
            position: absolute;
            top: 100%;
            width: 100%;
            height: 70px;
            left: 0;
            background-color: #333;
            display: none;
        }

        .btli-3 {
            display: flex;
            padding-left: 700px;
        }

        .nav-2 li a {
            padding: 10px 35px;
            color: #fff;
        }

        .second li:hover .nav-2 {
            display: block;
        }

        .third {
            display: flex;
            margin-left: 80px;
        }

        .third .one {
            margin-top: 14px;
            height: 31px;
            width: 100px;
            border: 1px solid rgb(252, 253, 253);
            color: rgb(252, 253, 253);
            text-align: center;
            letter-spacing: 2px;
            font-family: '微软雅黑', serif;
            line-height: 30px;
            border-radius: 5px;
            font-size: 14px;
        }

        .third .one:hover {
            background-color: rgb(252, 253, 253);
            color: black;
        }

        .third .two {
            margin-top: 14px;
            margin-left: 20px;
            height: 31px;
            width: 100px;
            color: black;
            background-color: rgb(252, 253, 253);
            text-align: center;
            letter-spacing: 2px;
            font-family: '微软雅黑', serif;
            line-height: 30px;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <!-- header -->
    <div class="header">
        <div class="first">
            <img src="../img/米家.png" width="50">
            <p>小米汽车</p>
        </div>
        <div class="second">
            <ul class="underline">
                <li class="btli">
                    <a href="#">
                        首页
                    </a>
                </li>
                <li class="btli"><a href="#">小米SU7</a>
                    <div class="nav">
                        <ul class="btli-1">
                            <li><a href="#">小米SU7</a></li>
                            <li><a href="#">小米SU7 创始版</a></li>
                            <li><a href="#">车型对比</a></li>
                        </ul>
                    </div>
                </li>
                <li class="btli"><a href="#">核心技术</a>
                    <div class="nav-1">
                        <ul class="btli-2">
                            <li><a href="#">超级电机</a></li>
                            <li><a href="#">高压平台</a></li>
                            <li><a href="#">超级大压铸</a></li>
                            <li><a href="#">智能驾驶</a></li>
                            <li><a href="#">智能座舱</a></li>
                        </ul>
                    </div>
                </li>
                <li class="btli"><a href="#">小米汽车工厂</a></li>
                <li class="btli"><a href="#">门店查询</a></li>
                <li class="btli"><a href="#">服务介绍</a>
                    <div class="nav-2">
                        <ul class="btli-3">
                            <li><a href="#">服务保障</a></li>
                            <li><a href="#">充电补能</a></li>
                            <li><a href="#">金融试算</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="third">
            <div class="one">预约试驾</div>
            <div class="two">去APP购物</div>
        </div>
    </div>
    <!-- header end -->
</body>

</html>